前端uniap实现搜索功能

您所在的位置：网站首页 › spurii search使用 › 前端uniap实现搜索功能

前端uniap实现搜索功能

2023-10-15 14:52| 来源: 网络整理| 查看: 265

一、使用uview实现

1.使用到的组件搜索框

placeholder--搜索框里面的提示文字。@search--回车或者点击搜索时触发的函数

2.申明keyword

3.清空展示数据后通过for循环遍历所有的数据，把需要的内容通过关键字搜索出来放到展示数据里

export default { data() { return { keyword:''， aList：[],//展示的数据 bList:[] //所有的数据 } }, methods: { searchHistory(value){ // value自动接收输入框中的内容 if (value == ''){ //如果输入的值为空则加载所有的列表 this.getList(); }else { //先清空展示的数据 this.aList = [] //然后开始循环全部数据 for (var i = 0; i < this.bList.length; i++) { //判断数据里面是否有符合输入的内容不符合返回-1 只需要大于或等于0就是符合 //（核心所在，其它都是根据需求来自己写） if (this.bList[i].pullTime.indexOf(value) >= 0) { this.aList.push(this.bList[i]) } } } }, getList(){ //向后台发送请求，拿到所有的数据然后赋值给aList和bList } }

二、通过后端提供接口来实现搜索

1.使用到的组件搜索框

placeholder--搜索框里面的提示文字。@search--回车或者点击搜索时触发的函数

2.把keyword 传给后台进行查询

export default { data() { return { keyword:''， list：[],//展示的数据 para: { pageNumber: 1, //页数，第一页 pageSize: 10, //每页展示的数据数，10条数据 types: 0 //传给后台的类型（看自己需求） }, isLastPage：false， } }, methods: { async getList(refresh){ if (refresh) { this.para.pageNumber = 1; this.list = []; this.isLastPage = false; } else { this.para.pageNumber++; } if (this.isLastPage) { //页面信息提示，iipKit是自己封装的组件 this.iipKit.toast('没有更多了'); return; } let page = await this.$api.向后台请求数据(para); this.list.push(...page.list); this.isLastPage = page.lastPage; } }

【本文地址】

前端uniap实现搜索功能

前端uniap实现搜索功能

今日新闻

推荐新闻